<template>
  <!-- artivles.vue 专用组件 -->
  <div class="container-preview" v-if="articles">
    <el-dialog
      title="预览文章"
      :visible="articlesshowDialog"
      @close="closearticles"
    >
      <div>
        <el-row>
          <el-col>
            <h3>{{ articles.title }}</h3>
          </el-col>
          <el-col>
            {{ articles.createTime }} {{ articles.username }}
            <i class="el-icon-basketball"></i>
            {{ articles.visits }}
          </el-col>
        </el-row>
      </div>

      <!-- 课程内容 -->
      <el-card>
        <div v-html="articles.articleBody"></div>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "preview",
  props: {
    //控制弹层
    articlesshowDialog: {
      type: Boolean,
      default: false,
    },
    //拿取父亲的值
    articles: {
      type: Object,
    },
  },
  data() {
    return {};
  },
  methods: {
    closearticles() {
      // this.articlesshowDialog = false;
      // this.articles = "";
      this.$emit("update:articlesshowDialog", false);
      this.$emit("update:articles", "");
    },
  },
};
</script>

<style scoped lang="scss">

</style>
